<template>
	<view class="login login-bg w-h-100" :class="darkMode?'custom-dark':'custom-light'">
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="logoImage"></image>
			</view>
			<view class="loginType">
				<view>你好，</view>
				<view>欢迎使用MptSolution</view>
				<view>移动OA办公</view>
			</view>
			<!-- 主体表单 -->
			<view class="main">
				<u--input placeholder="賬號/工號/手機號" border="surround" v-model="phoneData"></u--input>
				<u--input placeholder="密码" border="surround" v-model="passData" type="password"></u--input>
			</view>
			<view class="keppPw">
				<u-checkbox-group v-model="checkboxValue1" placement="column">
					<u-checkbox v-for="(item, index) in checkboxList1" :key="index" :label="item.name"
						:name="item.name">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<u-button text="登录" @click.native="startLogin()" class="dlbutton"></u-button>
			<view class="forgetPw" @click.native="forgetPw()">
				<label>忘记密码？</label>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import forget from './forget.vue'
	import minApi from '../../api/api.js'
	export default {
		computed: {
			...mapGetters(['darkMode'])
		},
		data() {
			return {
				// logo图片
				logoImage: '/static/img/mptlogo.png',
				phoneData: '', //用户/电话
				passData: '', //密码
				rePasswd: '0', //记住密码
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [{
					name: '记住密码',
					disabled: false
				}, ],
			};
		},
		components: {
			forget
		},
		onLoad(options) {
			if (options.errorMsg) {
				uni.showToast({
					title: options.errorMsg,
					icon: 'none'
				})
			}
		},
		methods: {
			async startLogin() {
				//登录
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.phoneData == "") {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '用户名不能为空'
					});
					return;
				}
				if (this.passData == "") {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '密碼不能為空'
					});
					return;
				}
				const resule = await minApi.apis.login({"LoginId": this.phoneData,"Password": this.passData});
				uni.setStorage("token",res);
				uni.reLaunch({
					url:"../program/index"
				})
			},
			forgetPw() {
				uni.navigateTo({
					url: './forget',
				})
			},

		}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");

	.main .u-input {
		margin: 20rpx 0rpx;
		background-color: #F1F1F1;
	}

	.login-bg .content .header uni-image {
		width: 98px;
		height: 62px;
	}

	.loginType {
		font-weight: bold;
		font-size: 40rpx;
		margin-left: 66rpx;
		margin-bottom: 20rpx;
	}

	.loginType uni-view {
		font-size: 40rpx;
	}

	.keppPw {
		max-width: calc(100% - 260upx);
		margin-right: 66rpx;
		margin-left: auto;
		display: flex;
		align-items: center;
	}

	.forgetPw {
		margin-top: 28rpx;
		font-size: 20rpx;
		margin-left: auto;
		margin-right: 66rpx;
		color: #708090;
	}
	.dlbutton {
		color: #FFFFFF;
		font-size: 30upx;
		width: 616upx;
		height: 88upx;
		background: linear-gradient(to right, #0052D4, #4364F7, #6FB1FC);
		box-shadow: 0upx 0upx 13upx 0upx rgba(164, 217, 228, 0.4);
		line-height: 88upx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 46upx;
	}
</style>
